<template>
  <view class="order-list">
    <navigation back title="我的订单" />

    <u-sticky>
      <view class="sticky">
        <view class="page-container">
          <u-tabs
            class="tabs"
            lineColor="linear-gradient( 270deg, rgba(255,242,242,0) 0%, #FE774C 100%)"
            lineWidth="42"
            lineHeight="3"
            :activeStyle="activeStyle"
            :itemStyle="itemStyle"
            :list="tabList"
            :current="tabIndex"
            @click="clickTab"
          />
        </view>
      </view>
    </u-sticky>

    <view class="page-container">
      <view class="list">
        <!-- 骨架屏 -->
        <view class="skeleton-view" v-if="loading && !list.length">
          <view
            class="skeleton-item"
            v-for="(item, index) in Array(1)"
            :key="index"
          >
            <u-skeleton rows="7" loading :title="false" />
          </view>
        </view>

        <block v-else-if="list.length">
          <view
            class="item"
            v-for="(item, index) in list"
            :key="index"
            @click="toDetail"
          >
            <view class="title flex flex-middle flex-between">
              <view>2025-06-05 17:05:49</view>
              <view class="right"> 待付款 </view>
            </view>

            <view class="order-info">
              <image mode="aspectFill" src="@/static/image/common/test.png" />
              <view class="info">
                <view class="name">中式推拿·SPA</view>
                <view class="tips">￥298.0/90分钟</view>
                <view class="price flex flex-middle flex-between">
                  <view class="left flex flex-middle">
                    已优惠
                    <text> ¥10.0 </text>
                  </view>
                  <view class="right flex flex-middle">
                    合计
                    <text class="small">¥</text>
                    <text> 586.0 </text>
                  </view>
                </view>
              </view>
            </view>
            <!-- 操作 -->
            <operate />
          </view>
        </block>

        <block v-else>
          <view class="default-view text-center">
            <image src="@/static/image/common/default.png" mode="widthFix" />
            <view class="title">暂无订单信息</view>
            <view class="tips">快去下单～</view>
            <view
              class="btn flex flex-middle flex-center"
              @click="toCreateOrder"
            >
              去逛逛
            </view>
          </view>
        </block>
      </view>
    </view>

    <view class="safe-bottom">
      <u-loadmore
        class="loadmore"
        :status="loadStatus"
        v-if="list.length || loading"
      />
    </view>
  </view>
</template>

<script>
import operate from "./components/operate";
import { getOrderList } from "@/api/order";

export default {
  components: {
    operate,
  },
  data() {
    return {
      page: 1,
      list: [],
      loading: false,
      totalPage: 0,
      tabIndex: 0,
      tabList: [
        {
          name: "全部",
        },
        {
          name: "待付款",
        },
        {
          name: "待使用",
        },
        {
          name: "待评价",
        },
        {
          name: "退款/售后",
        },
      ],
      activeStyle: {
        color: "#000",
        fontSize: "14px",
      },
      inactiveStyle: {
        color: "#999",
        fontSize: "14px",
      },
      itemStyle: {
        height: "48px",
        width: "20%",
        padding: "0",
      },
    };
  },
  computed: {
    loadStatus() {
      let str = this.loading
        ? "loading"
        : this.totalPage <= this.page
        ? "nomore"
        : "loadmore";
      return str;
    },
  },
  onPullDownRefresh() {
    this.refresh();
  },
  onReachBottom() {
    if (this.totalPage <= this.page) return;
    this.page += 1;
    this.getOrderList();
  },
  onLoad({ type }) {
    if (type) this.tabIndex = +type + 1;
    this.refresh();
  },
  methods: {
    toCreateOrder() {
      this.$switchTab("/pages/home/index");
    },
    async getOrderList() {
      this.loading = true;
      const { data, code } = await getOrderList({
        page: this.page,
        type: !this.tabIndex
          ? 6
          : this.tabIndex == 1
          ? 0
          : this.tabIndex == 2
          ? 2
          : this.tabIndex == 3
          ? 3
          : -3,
      });
      this.loading = false;
      uni.stopPullDownRefresh();
      if (code !== 200) return;
      this.list = this.list.concat(data.list);
      this.totalPage = data.totalPage;
    },
    refresh() {
      this.list = [];
      this.page = 1;
      this.getOrderList();
    },
    toDetail() {
      this.$navigateTo(`/pages/order/detail`);
    },
    clickTab({ index }) {
      this.tabIndex = index;
      this.refresh();
    },
  },
};
</script>

<style scoped lang="scss">
.skeleton-view {
  .skeleton-item {
    padding-top: 16px;
  }
}

.default-view {
  margin-top: 28px;

  .btn {
    width: 126px;
    height: 36px;
    background: #232323;
    border-radius: 36px;
    color: #fff;
    font-weight: bold;
    margin: 30px auto 0;
  }

  .tips {
    color: #aeaeae;
    margin-top: 2px;
  }

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #232323;
  }

  image {
    width: 160px;
  }
}

.list {
  padding: 0 16px;

  .item {
    background: #fff;
    padding: 16px;
    margin-top: 16px;
    border-radius: 6px;

    .order-info {
      overflow: hidden;
      margin-top: 12px;
      margin-bottom: 18px;

      .price {
        color: #232323;
        margin-top: 6px;

        .left {
          text {
            color: #ea473f;
            margin-left: 4px;
          }
        }

        .right {
          .small {
            font-size: 12px;
            margin-bottom: -4px;
            margin-left: 4px;
          }

          text {
            font-size: 18px;
          }
        }
      }

      .info {
        padding-left: 84px;

        .name {
          color: #232323;
          font-weight: bold;
        }

        .tips {
          margin-top: 2px;
          font-size: 12px;
          color: #9a9ea9;
        }
      }

      image {
        float: left;
        width: 72px;
        height: 72px;
        border-radius: 4px;
      }
    }

    .title {
      font-size: 12px;
      color: #aeaeae;
      padding-bottom: 8px;
      border-bottom: 1px solid #efefef;

      .right {
        font-size: 14px;
        color: #fe774c;
      }
    }
  }
}

.loadmore {
  margin: 0 !important;
  padding: 16px 0;
}

.order-list {
  min-height: 100vh;
  background: #f6f6f6;
}

.sticky {
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #eee;

  ::v-deep .u-tabs__wrapper__nav__line {
    bottom: 8px !important;
  }
}

.tabs {
  width: 100%;
}
</style>